<template>
  <div class="Ly_wrapper">
    <div class="Ly_swiper">
      <!-- 轮播图开始 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in bannerList" :key="index">
          <img :src="item.banner_img" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!-- 轮播图结束 -->
      <!-- 特色课程开始 -->
      <div class="Ly_indexKinds">
        <ul>
          <router-link
            :to="item.skip"
            tag="li"
            v-for="(item, index) in featureList"
            :key="index"
          >
            <img :src="item.img" alt="" />
            <font>{{ item.name }}</font>
          </router-link>
        </ul>
      </div>
    </div>
    <!-- 特色课程结束 -->
    <!-- 推荐课程开始 -->
    <section>
      <p class="Ly_indexTop"><span></span>推荐课程</p>
      <div class="Ly_otoContent">
        <van-cell
          class="Ly_iiItem"
          v-for="(item, index) in starList.list"
          :key="index"
          @click="detail(item)"
        >
          <template>
            <div class="Ly_itemTitle">{{ item.title }}</div>
            <div class="Ly_itemHour">共{{ item.total_periods }}课时</div>
            <div>
              <div
                class="Ly_cardItem2"
                v-for="(item2, index) in item.teachers_list"
                :key="index"
              >
                <div class="img">
                  <img :src="item2.teacher_avatar" alt />
                </div>
                <div>
                  <p>{{ item2.teacher_name }}</p>
                </div>
              </div>
            </div>
            <div class="Ly_itemApply">
              <div>{{ item.sales_num }}人报名</div>
              <div class="Ly_free">
                <img src="../../../assets/gold.png" alt="" />
                {{ item.price }}.00
              </div>
            </div>
          </template>
        </van-cell>
      </div>
    </section>
    <!-- 推荐课程结束 -->

    <!-- 精品课程开始 -->
    <section>
      <p class="Ly_indexTop"><span></span>精品课程</p>
      <div class="Ly_otoContent">
        <van-cell
          class="Ly_iiItem"
          v-for="(item, index) in boutiqueList.list"
          :key="index"
          @click="detail(item)"
        >
          <template>
            <div class="Ly_itemTitle">{{ item.title }}</div>
            <div class="Ly_itemHour">共{{ item.total_periods }}课时</div>
            <div>
              <div
                class="Ly_cardItem2"
                v-for="(item2, index) in item.teachers_list"
                :key="index"
              >
                <div class="img">
                  <img :src="item2.teacher_avatar" alt />
                </div>
                <div>
                  <p>{{ item2.teacher_name }}</p>
                </div>
              </div>
            </div>
            <div class="Ly_itemApply">
              <div>{{ item.sales_num }}人报名</div>
              <div class="Ly_free">
                <img src="../../../assets/gold.png" alt="" />
                {{ item.price }}.00
              </div>
            </div>
          </template>
        </van-cell>
      </div>
    </section>
    <!-- 精品课程结束 -->

    <!-- 名师阵容开始 -->
    <section>
      <p class="Ly_indexTop"><span></span>名师阵容</p>
      <div class="Ly_otoContent">
        <router-link
          tag="div"
          to="#"
          class="Ly_otoItem"
          v-for="(item, index) in teacherList.list"
          :key="index"
        >
          <img :src="item.teacher_avatar" alt="" />
          <div>
            <div>{{ item.teacher_name }}</div>
            <div class="Ly_phone">{{ item.introduction }}</div>
          </div>
        </router-link>
      </div>
    </section>
    <!-- 名师阵容结束 -->

    <!-- 约课讲师开始 -->
    <section>
      <p class="Ly_indexTop"><span></span>约课讲师</p>
      <div class="Ly_otoContent">
        <router-link
          tag="div"
          to="#"
          class="Ly_otoItem"
          v-for="(item, index) in courseList.list"
          :key="index"
        >
          <img :src="item.teacher_avatar" alt="" />
          <div>
            <div>{{ item.teacher_name }}</div>
            <div class="Ly_phone">{{ item.introduction }}</div>
          </div>
        </router-link>
      </div>
    </section>
    <!-- 约课讲师结束 -->
  </div>
</template>

<script>
import { banner, Ly_appIndex, Ly_detail } from "../../../../request/http";
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      bannerList: [],
      featureList: [
        {
          name: "特色课程",
          img:
            "",
          skip: "#",
        },
        {
          name: "一对一辅导",
          img:
            "",
          skip: "",
        },
        {
          name: "学习日历",
          img:
            "",
          skip: "",
        },
      ],
      starList: [], //推荐数据
      boutiqueList: [], //精品数据
      teacherList: [], //名师数据
      courseList: [], //约课数据
    };
  },
  computed: {},
  watch: {},
  created() {
    // 轮播图
    this.banner();
  },
  mounted() {},
  methods: {
    async banner() {
      // 请求轮播图数据
      const bannerList = await banner();
      this.bannerList = bannerList;
      // 请求首页数据
      const indexList = await Ly_appIndex();
      [
        this.starList,
        this.boutiqueList,
        this.teacherList,
        this.courseList,
      ] = indexList;

      // console.log(indexList);
      // console.log(this.teacherList);
      // console.log(this.boutiqueList);
      // console.log(this.starList);
      // console.log(this.courseList);
    },
    detail(item) {
      this.$router.push({
        path: "/Ly_detail",
        query: {
          id: item.id
        }
      });
      console.log(item.id);
    },
  },
};
</script>

<style lang='scss' scoped>
// 大盒子开始
.Ly_wrapper {
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  margin-bottom: 60px;
}
// 轮播图九宫格布局开始
.Ly_swiper {
  width: 100%;
  height: 298px;
}
.my-swipe {
  width: 100%;
  height: 214px;
  img {
    width: 100%;
    height: 100%;
  }
}
// 轮播图九宫格布局结束

// 特色课程开始
.Ly_indexKinds {
  padding: 0 2.66667vw;
  margin-top: -6.66667vw;
  margin-bottom: 5.33333vw;
  position: relative;
  font-family: PingFangSC-Regular;
  ul {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    li {
      flex-direction: column;
      background: #fff;
      border-radius: 2.66667vw;
      width: 27.46667vw;
      height: 27.46667vw;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        height: 5.33333vw;
        display: block;
        width: 5.6vw;
      }
      font {
        font-size: 3.2vw;
        font-weight: 400;
        color: #8c8c8c;
        margin-top: 4vw;
      }
    }
  }
}
// 特色课程结束

// 名师阵容开始
.Ly_indexTop {
  padding-left: 27px;
  font-size: 16px;
  position: relative;
  color: #595959;
  span {
    width: 3px;
    height: 16px;
    display: inline-block;
    position: absolute;
    left: 4vw;
    top: 50%;
    background: #eb6100;
    transform: translateY(-50%);
  }
}
.Ly_otoContent {
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  .Ly_otoItem {
    padding: 0 15px;
    margin-bottom: 10px;
    height: 81px;
    background: #fff;
    display: flex;
    align-items: center;
    border-radius: 6px;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
    }
    div {
      div {
        font-size: 14px;
      }
      .Ly_phone {
        font-size: 12px;
        height: 15px;
        overflow: hidden;
        color: #b7b7b7;
        margin-top: 10px;
      }
    }
  }
}
// 名师阵容结束

// 精品课程开始
.Ly_iiItem {
  background: #fff;
  border-radius: 6px;
  margin-bottom: 16px;
  display: flex;
  .Ly_itemTitle {
    font-size: 16px;
  }
  .Ly_itemHour {
    font-size: 12px;
    color: #666666;
  }
  .Ly_cardItem2 {
    display: flex;
    align-items: center;
    margin-top: 10px;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
    }
    div {
      font-size: 12px;
      color: #8c8c8c;
    }
  }
  .Ly_itemApply {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // margin-top: 18px;
    div {
      font-size: 12px;
      color: #8c8c8c;
    }
    .Ly_free {
      font-size: 16px;
      color: red;
      display: flex;
      align-items: center;
      img {
        width: 18px;
        height: 16px;
      }
    }
  }
}
// 精品课程结束
</style>
